<template>
  <el-dialog
    :title="isEdit ? '编辑退款记录' : '新增退款记录'"
    :model-value="visible"
    width="500px"
    @close="handleClose"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="用户ID" prop="userId">
        <el-input-number v-model="form.userId" :min="1" style="width: 100%" placeholder="请输入用户ID" />
      </el-form-item>

      <el-form-item label="订单ID" prop="orderId">
        <el-input-number v-model="form.orderId" :min="1" style="width: 100%" placeholder="请输入订单ID" />
      </el-form-item>

      <el-form-item label="退款金额" prop="refundAmount">
        <el-input-number v-model="form.refundAmount" :min="0" :precision="2" style="width: 100%" placeholder="请输入金额" />
      </el-form-item>

      <el-form-item label="退款原因" prop="refundReason">
        <el-input type="textarea" v-model="form.refundReason" placeholder="请输入退款原因" />
      </el-form-item>

      <el-form-item label="处理状态" prop="processStatus">
        <el-select v-model="form.processStatus" placeholder="请选择状态" style="width: 100%">
           <el-option label="处理中" value="处理中" />
           <el-option label="已退款" value="已退款" />
           <el-option label="已拒绝" value="已拒绝" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  isEdit: Boolean,
  formData: Object,
  loading: Boolean
})

const emit = defineEmits(['update:visible', 'submit'])

const formRef = ref()

// 表单数据
const form = reactive({
  userId: undefined,
  orderId: undefined,
  refundAmount: 0,
  refundReason: '',
  processStatus: '处理中'
})

// 验证规则
const rules = reactive({
  userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
  orderId: [{ required: true, message: '请输入订单ID', trigger: 'blur' }],
  refundAmount: [{ required: true, message: '请输入退款金额', trigger: 'blur' }],
  processStatus: [{ required: true, message: '请选择处理状态', trigger: 'change' }]
})

// 监听 formData 变化，进行回显或重置
watch(() => props.formData, (val) => {
  if (props.isEdit && val) {
    Object.assign(form, {
      userId: val.userId,
      orderId: val.orderId,
      refundAmount: val.refundAmount,
      refundReason: val.refundReason,
      processStatus: val.processStatus || '处理中'
    })
  } else {
    resetForm()
  }
}, { immediate: true, deep: true })

// 监听 visible 变化，打开时若是新增则重置
watch(() => props.visible, (val) => {
  if (val && !props.isEdit) {
    resetForm()
  }
})

function resetForm() {
  form.userId = undefined
  form.orderId = undefined
  form.refundAmount = 0
  form.refundReason = ''
  form.processStatus = '处理中'
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const handleClose = () => {
  emit('update:visible', false)
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('submit', { ...form })
    }
  })
}
</script>

<style scoped>
</style>

